<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="../static/layui/css/layui.css">
	<script src="../static/layui/layui.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Inventory Management System</title>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
            <div class="layui-logo "><i class="layui-icon layui-icon-cart"></i>Inventory Management</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="/index/"><i class="layui-icon layui-icon-table"></i>Goods Management</a></li>
                <li class="layui-nav-item"><a href="/count/"><i class="layui-icon layui-icon-rmb"></i>Budget Statistics</a></li>
                <li class="layui-nav-item"><a href="/other/"><i class="layui-icon layui-icon-time"></i>Stock Records</a></li>
                <li class="layui-nav-item"><a href="/notifications/"><i class="layui-icon layui-icon-notice"></i>Notifications</a></li>
                {% if session.get('role') == 'super_admin' %}
                <li class="layui-nav-item"><a href="/admin/manage_users"><i class="layui-icon layui-icon-set"></i>User Management</a></li>
                {% endif %}
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="/logout" class="layui-btn layui-btn-danger">Logout</a>
                </li>
            </ul>
        </div>


		<div style="padding: 5%;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>Budget Statistics</legend>
    </fieldset>
    <form class="layui-form" action="/error/" lay-filter="counts" id="counts" style="margin-left: 20%;margin-top: 5%;">
        <div class="layui-form-item">
{#            <div class="layui-inline">#}
{#                <label class="layui-form-label">Purpose</label>#}
{#                <div class="layui-input-inline">#}
{#                    <select name="place" lay-verify="required">#}
{#                        <option value="">Select</option>#}
{#                        <option value="Milling Cutter">Milling Cutter</option>#}
{#                        <option value="Lathe Tool">Lathe Tool</option>#}
{#                        <option value="Tools">Tools</option>#}
{#                        <option value="Others">Others</option>#}
{#                    </select>#}
{#                </div>#}
{#            </div>#}
            <div class="layui-inline">
                <label class="layui-form-label">In/Outbound</label>
                <div class="layui-input-inline">
                    <select name="inorout" lay-verify="required">
                        <option value="">Select</option>
                        <option value="Outbound">Outbound</option>
                        <option value="Inbound">Inbound</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">Start Date</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="date1" id="date1" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">End Date</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="date2" id="date2" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="go">Submit</button>
                <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
            </div>
        </div>
    </form>
</div>
	</div>

</body>

	<script>
		layui.use(['laydate','form'], function () {
			var laydate = layui.laydate;
			var form = layui.form;
			laydate.render({
	            elem: '#date1' //指定元素
	            ,trigger: 'click'
	            ,type: 'date'
	        });
			laydate.render({
	            elem: '#date2' //指定元素
	            ,trigger: 'click'
	            ,type: 'date'
	        });
	
			form.on('submit(go)', function(data){
	            layui.use('table', function(){
	                var table = layui.table;
	                layer.open({
	                    type : 1,
	                    area : [ "100%", '100%' ],
	                    title : "Expenditure Outturn",
	                    maxmin : false,
	                    content : '<div><table id="templateTable"></table></div><script type="text/html" id="toolbarDemo"/>',
	                    success : function(index, layero) {
	                            table.render({elem: '#templateTable'
	                            ,url: '/data/counts?inorout='+data.field.inorout+'\&date1='+data.field.date1+'\&date2='+data.field.date2
	                            , page: true
	                            ,limit:50
	                            ,skin: 'row'
	                            ,even: true
	                            ,height: 'full-60'
	                            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	                            , defaultToolbar: ['filter', 'exports', 'print',]
	                            ,cols: [[ //表头
	                                  {field: 'id', title: 'ID', width:80, sort: true}
	                                  , { field: 'name', title: 'Name', width: 160 , sort: true }
	                                , { field: 'model', title: 'Model', width: 160 , sort: true}
	                                , { field: 'factory', title: 'Factory', width: 160, sort: true}
	                                , { field: 'process', title: 'Process', width: 200}
	                                , { field: 'number', title: 'Number', width: 100 }
	                                , { field: 'inorout', title: 'In/Out', width: 80}
	                                , { field: 'sum_change', title: 'Quantity ', width: 130 }
	                                , { field: 'price', title: 'Price', width: 80}
	                                , { field: 'money', title: 'Cost', width: 100 }
	                            ]]
	                          });
	                    }
	                });
	            });
	            return false;
	        });
	    });
	</script>

</html>
